<template>
  <div class="container">
    <!-- 面包屑 -->
    <Breadcrumb v-if="!roomshow" />
    <a-card class="data-card" v-if="!roomshow">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
          >
            <a-row :gutter="20">
              <a-col :span="5">
                <a-form-item field="roomName" label="房间名">
                  <a-input
                    v-model="formModel.roomName"
                    placeholder="请输入房间名"
                    :allow-clear="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="5">
                <a-form-item field="roomStatus" label="房间状态">
                  <a-select
                    v-model="formModel.roomStatus"
                    placeholder="请选择房间状态"
                    allow-clear
                  >
                    <a-option
                      v-for="item of roomStatus"
                      :key="item.id"
                      :value="item.id"
                      >{{ item.name }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="5" class="roombt">
                <a-space :size="18">
                  <a-button type="primary" @click="onPageChange(1)">
                    <template #icon>
                      <icon-search />
                    </template>
                    搜索
                  </a-button>
                  <a-button @click="reset">
                    <template #icon>
                      <icon-refresh />
                    </template>
                    重置
                  </a-button>

                  <a-button type="primary" @click="openAdd(0)">
                    <template #icon>
                      <icon-plus />
                    </template>
                    新增
                  </a-button>
                  <a-button type="primary" @click="plfn"> 批量新增 </a-button>
                  <a-button type="primary" @click="openUpload" status="success">
                    模版导入
                  </a-button>
                  <a-button type="primary" @click="pldel" status="danger">
                    批量删除
                  </a-button>
                </a-space>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <div class="roombox" :loading="loading">
        <div class="roomitem" v-for="item in roomlist" :key="item.roomId">
          <div class="roomactive">
            <div
              class="roomzt"
              v-if="
                determineRoomStatus(item.roomOccupy, item.roomAppointment) ==
                '在使用'
              "
            >
              {{ determineRoomStatus(item.roomOccupy, item.roomAppointment) }}
            </div>
            <div
              class="roomzts"
              v-if="
                determineRoomStatus(item.roomOccupy, item.roomAppointment) ==
                '空闲'
              "
            >
              {{ determineRoomStatus(item.roomOccupy, item.roomAppointment) }}
            </div>
            <div
              class="roomzt"
              v-if="
                determineRoomStatus(item.roomOccupy, item.roomAppointment) ==
                '已预约'
              "
            >
              {{ determineRoomStatus(item.roomOccupy, item.roomAppointment) }}
            </div>
          </div>
          <div class="roomimg">
            <img :src="base + parseJSON(item.roomPhoto)" alt="" />
          </div>
          <div class="roomdesbox">
            <div class="roomxq">
              <span class="roomname">{{ item.roomName }}</span>
              <span @click="roomdesfn(item)" class="roomxqspan"
                >详情<icon-right
              /></span>
            </div>

            <span class="roomnuber">人数:{{ item.scheduleNumber }}人</span>
            <span class="roomacit"
              >{{ getAppointmentTypes(item.openAppointment) }}可预约</span
            >
            <div class="roomdelpl"
              ><a-checkbox-group v-model="roomIddx" @change="changsss">
                <a-checkbox :value="item.roomId"
                  >可选</a-checkbox
                ></a-checkbox-group
              >
            </div>
          </div>
        </div>
      </div>
      <a-empty v-if="pagination.total <= 0" />
      <div class="jzbox">
        <a-pagination
          :total="pagination.total"
          @change="onPageChange"
          v-if="pagination.total > 0"
        />
      </div>
    </a-card>

    <a-space
      direction="vertical"
      :size="16"
      style="display: block"
      v-if="roomshow"
    >
      <a-row class="grid-demo">
        <a-col :span="12">
          <a-card title="基本信息" class="cdbfbox">
            <a-form ref="addModel" :rules="rules" :model="addForm">
              <a-row>
                <a-col :span="15">
                  <a-form-item field="roomNo" label="房间编号:">
                    <a-input
                      v-model="addForm.roomNo"
                      size="large"
                      placeholder="请输入房间编号"
                      :disabled="addForm.roomNo ? true : false"
                    /> </a-form-item></a-col
              ></a-row>
              <a-row>
                <a-col :span="15">
                  <a-form-item field="roomName" label="房间名称:">
                    <a-input
                      v-model="addForm.roomName"
                      size="large"
                      placeholder="请输入房间名称"
                    /> </a-form-item
                ></a-col>
              </a-row>
              <a-row>
                <a-col :span="15"
                  ><a-form-item field="adminUser" label="管理员:">
                    <a-select
                      placeholder="请选择房间管理员"
                      multiple
                      :scrollbar="true"
                      :options="adminUserData"
                      v-model="addForm.adminUser"
                      :field-names="rolesFieldsd"
                    >
                    </a-select> </a-form-item
                ></a-col>
              </a-row>
              <a-row class="sycx">
                <div class="sycxitem">
                  <a-form-item field="scheduleNumber" label="">
                    <span class="scyapn">人数限制:</span>
                    <a-input
                      v-model="addForm.scheduleNumber"
                      size="large"
                      placeholder="请输入人数限制"
                    /> </a-form-item
                ></div>

                <div class="sycxitem">
                  <a-form-item field="openAppointment" label="">
                    <span class="scyapn">预约限制:</span>
                    <a-checkbox-group
                      v-model="selectedAppointments"
                      @change="cs"
                    >
                      <a-checkbox value="TEACHER">教师</a-checkbox>
                      <a-checkbox value="STUDENT">学生</a-checkbox>
                      <a-checkbox value="VISITOR">游客</a-checkbox>
                    </a-checkbox-group>
                  </a-form-item>
                </div>
              </a-row>
              <a-row>
                <a-col :span="14">
                  <a-form-item field="roomPhoto" label=" 房间照片:">
                    <div class="wrap">
                      <!-- 上传后显示 -->
                      <div id="look">
                        <div
                          id="look_img"
                          v-for="(item, index) in roomPhoto"
                          :key="index"
                        >
                          <div class="item_img">
                            <img :src="base + item" />
                            <div class="look_event">
                              <!-- <img
                          src="https://s1.ax1x.com/2022/08/08/vMEtPO.png"
                          alt
                          title="点击查看"
                          @click="look(item)"
                        /> -->
                              <img
                                src="@/assets/images/vMEaxH.png"
                                title="点击删除"
                                @click="deletes(item, index)"
                              />
                            </div>
                          </div>
                          <span class="item_time">{{ item.uptime }}</span>
                        </div>
                        <!-- 上传图片按钮 -->
                        <a-upload
                          class="updiv"
                          v-if="roomPhoto.length < 5"
                          v-model="roomPhoto"
                          @change="onChanges"
                          image-preview
                          :limit="6"
                          :multiple="true"
                          :auto-upload="false"
                          :show-file-list="false"
                          accept=".png,.jpg"
                        >
                          <template #upload-button>
                            <div
                              style="
                                background-color: var(--color-fill-2);
                                color: var(--color-text-1);
                                border: 2px dashed var(--color-fill-4);
                                height: 80px;
                                width: 80px;
                                line-height: 80px;
                                text-align: center;
                              "
                            >
                              <div> 上传图片 </div>
                            </div>
                          </template>
                        </a-upload>
                      </div>

                      <!-- 图片预览 -->
                      <!-- <el-dialog v-model="showPre" class="dialog">
                <img
                  :src="imgPre + pvwSrc"
                  alt="Preview Image"
                  class="preview_img"
                />
              </el-dialog>-->
                    </div>
                  </a-form-item>
                </a-col>
              </a-row>
              <!-- <a-row>
                <a-col :span="8">
                  <a-form-item label="预约限制:">
                    <div class="checkdate" @click="checkdate"
                      >查看预约限制</div
                    ></a-form-item
                  >
                </a-col>
              </a-row> -->
            </a-form>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="可预约时段" class="cdbfbox">
            <template #extra>
              <a-link @click="checkdate"> 编辑 </a-link>
            </template>
            <a-table
              ref="userList"
              :loading="loading"
              page-position="bottom"
              :pagination="pagination"
              :columns="columnss"
              :data="renderDatass"
              :bordered="false"
              @page-change="onPageChange"
              @page-size-change="onPageSizeChang"
            >
              <!-- <template #userType="{ record }">
                {{ getAppointmentTypes(record.userType) }}
              </template> -->
              <template #Timed="{ record }">
                可预约时间段{{ record.id }}
              </template>

              <template #disabled="{ record }">
                {{ record.disabled == '1' ? '启用' : '禁用' }}
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="12">
          <a-card title="申请列表">
            <template #extra>
              <a-link>
                <a-space direction="vertical" size="large">
                  <a-input-search
                    @click="fetchDatas()"
                    @press-enter="fetchDatas()"
                    :style="{ width: '320px' }"
                    placeholder="请输入预约人姓名"
                    v-model="nickname"
                  />
                </a-space>
              </a-link>
            </template>
            <a-table
              ref="userList"
              :loading="loading"
              page-position="bottom"
              :pagination="paginations"
              :columns="columns"
              :data="renderDatas"
              :bordered="false"
              @page-change="onPageChanges"
              @page-size-change="onPageSizeChange"
            >
              <!-- <template #userType="{ record }">
                {{ getAppointmentTypes(record.userType) }}
              </template> -->
              <template #createUser="{ record }">
                {{ record.createUser }}({{
                  getAppointmentTypes(record.userType)
                }})
              </template>

              <template #startTime="{ record }">
                {{ formatDateTimeRange(record.startTime, record.endTime) }}
              </template>
              <template #auditStatus="{ record }">
                {{ record.auditStatus == '1' ? '审核通过' : '审核未通过' }}
              </template>
            </a-table>
          </a-card>
        </a-col>
        <a-col :span="12" class="cd">
          <a-card title="近七日预约" class="cd">
            <div ref="chart" class="chart-container"> </div>
          </a-card>
        </a-col>
      </a-row>
      <a-row class="grid-demos">
        <a-col :span="24">
          <div class="mentsbox">
            <a-button type="primary" @click="backfn">返回</a-button>
            <a-button type="primary" status="success" @click="savefn"
              >保存</a-button
            >
            <a-button type="primary" status="danger" @click="delfn"
              >删除</a-button
            >
          </div>
        </a-col>
      </a-row>
    </a-space>
    <a-modal
      v-model:visible="addShow"
      @cancel="handleCancel"
      @close="fetchData()"
      :on-before-ok="handleCheck"
      :mask-closable="false"
      unmountOnClose
      class="startds df csdf"
    >
      <template #title>
        创建房间<div> —— </div>
        <div class="pltj" v-if="plbs" @click="openAdd(0)">单独添加</div>
        <div class="pltj" v-if="!plbs" @click="plfn">批量添加</div>
      </template>
      <!-- 批量 添加代码 -->
      <a-form
        ref="addModeld"
        :model="forms"
        v-for="(post, index) of forms.roomdata"
        v-show="plbs"
        :key="index"
      >
        <a-row class="rmcsd">
          <div class="rmpldov">
            <a-form-item
              label="房间编号:"
              class="rmcs"
              label-col-flex="75px"
              :field="`roomdata[${index}].roomNo`"
              :rules="[{ required: true, message: '房间编号不能为空' }]"
            >
              <a-input
                v-model="forms.roomdata[index].roomNo"
                size="large"
                placeholder="请输入房间编号"
              />
            </a-form-item>
          </div>
          <div class="rmpldov">
            <a-form-item
              label-col-flex="75px"
              :field="`roomdata[${index}].roomName`"
              :rules="[
                { required: true, message: '房间名称不能为空' },
                {
                  maxLength: 20,
                  message: '最长20位',
                },
                {
                  match:
                    /^(?=.*[\u4e00-\u9fa5a-zA-Z])[\da-zA-Z\u4e00-\u9fa5]+$/,
                  message: '不能为纯数字',
                },
              ]"
              label="房间名称:"
              class="rmcs"
            >
              <a-input
                v-model="forms.roomdata[index].roomName"
                size="large"
                placeholder="请输入房间名称"
              />
            </a-form-item>
          </div>
          <div class="rmpldov">
            <a-form-item
              label="人数限制:"
              class="rmcs"
              label-col-flex="75px"
              :field="`roomdata[${index}].scheduleNumber`"
              :rules="[
                { required: true, message: '人数限制不能为空' },
                {
                  match: /^(?:[1-9]\d*|0)$/,
                  message: '只能输入纯数字',
                },
              ]"
            >
              <a-input
                v-model="forms.roomdata[index].scheduleNumber"
                size="large"
                placeholder="请输入人数限制"
              />
            </a-form-item>
          </div>
          <div class="rmpldov">
            <a-form-item field="openAppointment" label="预约限制:">
              <a-checkbox-group v-model="forms.roomdata[index].openAppointment">
                <a-checkbox value="TEACHER">教师</a-checkbox>
                <a-checkbox value="STUDENT">学生</a-checkbox>
                <a-checkbox value="VISITOR">游客</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
          </div>
          <div class="rmpldovs">
            <a-button
              @click="handleDeleted(index)"
              :style="{ marginLeft: '10px' }"
              >删除</a-button
            >
          </div>
          <div class="rommzw"></div>
        </a-row>

        <!-- {{ form }} -->
      </a-form>
      <div class="addboxdd" v-show="plbs">
        <a-button @click="handleAddd">添加</a-button>
      </div>
      <div class="rommzw"></div>
      <!-- 批量添加完成代码 -->

      <a-form
        ref="addModel"
        :rules="rules"
        :model="addForm"
        v-show="!plbs"
        style="width: 500px"
      >
        <a-form-item field="roomNo" label="房间编号:">
          <a-input
            v-model="addForm.roomNo"
            size="large"
            placeholder="请输入房间编号"
          />
        </a-form-item>
        <a-form-item field="roomName" label="房间名称:">
          <a-input
            v-model="addForm.roomName"
            size="large"
            placeholder="请输入房间名称"
          />
        </a-form-item>
        <a-form-item field="scheduleNumber" label="人数限制:">
          <a-input
            v-model="addForm.scheduleNumber"
            size="large"
            placeholder="请输入人数限制"
          />
        </a-form-item>
        <a-form-item field="adminUser" label="管理员:">
          <a-select
            placeholder="请选择房间管理员"
            multiple
            :scrollbar="true"
            :options="adminUserData"
            v-model="addForm.adminUser"
            :field-names="rolesFieldsd"
          >
          </a-select>
        </a-form-item>

        <a-form-item field="openAppointment" label="预约限制:">
          <a-checkbox-group v-model="selectedAppointments" @change="cs">
            <a-checkbox value="TEACHER">教师</a-checkbox>
            <a-checkbox value="STUDENT">学生</a-checkbox>
            <a-checkbox value="VISITOR">游客</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item field="roomPhoto" label="房间照片:">
          <a-upload
            v-model="roomPhoto"
            list-type="picture-card"
            @change="onChange"
            image-preview
            :limit="6"
            :multiple="true"
            :auto-upload="false"
            tip="上传图片"
            accept=".png,.jpg"
          />
        </a-form-item>
        <a-form-item label="">
          图片最多可以上传6张,文件5mb以内，格式png、jpg
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- v-model:visible="c" -->

    <a-modal
      v-model:visible="dateshow"
      @cancel="handleCancel"
      class="bz"
      @ok="saveA"
    >
      <template #title> 可预约时间段 </template>
      <div class="df">
        <div class="rulesbt">
          <div class="rulesitemone">时段序号</div>
          <div class="rulesitemtwo">时段范围</div>
          <div class="rulesitemthree">操作</div>
        </div>
        <a-form :model="form" :style="{ width: '450px' }" class="tcysb">
          <a-form-item
            v-for="(post, index) of form.timedata"
            :field="`posts[${index}].value`"
            :label="`可选时段-${index + 1}`"
            :key="index"
          >
            <!--    -->
            <a-time-picker
              v-model="form.timedata[index].timers"
              format="HH:mm"
              type="time-range"
              style="width: 190px"
              disabled
              @select="selectfn($event, index)"
              @change="changetimer($event, index)"
              :disabledHours="() => form.timedata[index].disabledHours"
              :disabledMinutes="() => isabledMinutes"
            />
            <!--  getDisabledMinutes(
                    form.timedata[index].startTime,
                    form.timedata[index].endTime,
                    form.timedata[index].timers
                  ) -->
            <a-button
              @click="handleDelete(index)"
              :style="{ marginLeft: '10px' }"
            >
              {{ post.disabled == 1 ? '禁用' : '启用' }}
            </a-button>
          </a-form-item>

          <!-- {{ form }} -->
        </a-form>
        <!-- <div class="addbox">
          <a-button @click="handleAdd">添加时段</a-button>
        </div> -->
      </div>
    </a-modal>

    <a-modal
      class="df"
      v-model:visible="uploadShow"
      @cancel="uploadCancel"
      :on-before-ok="uploadCheck"
      :mask-closable="false"
      unmountOnClose
      width="450px"
    >
      <template #title> 导入用户 </template>
      <a-form ref="uploadModel" :rules="uploadRules" :model="uploadForm">
        <a-row style="margin-bottom: 16px">
          <a-form-item field="file" label="文件">
            <a-upload
              class="upload_box"
              @change="onChangesd"
              accept=".xls,.xlsx"
              ref="uploadRef"
              :auto-upload="false"
              :limit="1"
            >
              <template #upload-button>
                <a-space>
                  <a-button type="primary">选择附件</a-button>
                  <a-button @click.stop="downloadTemplate">下载模板</a-button>
                </a-space>
              </template>
            </a-upload>
          </a-form-item>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs';
  import { ref, reactive, getCurrentInstance, computed, onMounted } from 'vue';
  import useLoading from '@/hooks/loading';
  import {
    roomList,
    addRoom,
    delRoom,
    saveRoom,
    roomyuye,
    dataAppointment,
    updateScheduleTime,
    appointmentTime,
    downloadTemplate,
    importUser,
    userNameList,
    uploadFile,
  } from '@/api/room';
  import { Message, Modal } from '@arco-design/web-vue';
  import { putProgress } from '@/utils/oss.js';
  import * as echarts from 'echarts';
  const plbs = ref(false);
  const base = ref(window.config.VUE_APP_BASE_IMG);
  const forms = reactive({
    roomdata: [
      { roomNo: '', roomName: '', scheduleNumber: '', openAppointment: '' },
    ],
  });
  const plfn = () => {
    addShow.value = true;
    plbs.value = true;
    forms.roomdata = [
      { roomNo: '', roomName: '', scheduleNumber: '', openAppointment: '' },
    ];
  };
  const roomIddx = ref([]);
  const changsss = () => {};
  const pldel = () => {
    if (roomIddx.value.length == 0) {
      Modal.confirm({
        title: '提示',
        content: '请先选中要删除的房间？',
      });
    } else {
      Modal.confirm({
        title: '提示',
        content: '确定批量删除吗？',
        onOk() {
          Promise.all(
            roomIddx.value.map((timetableId) => {
              return delRoom({
                roomId: timetableId,
              }).then((res) => {
                if (res.code == '200') {
                  // Message.success({
                  //   content: '删除成功',
                  // });

                  fetchData();
                }
              });
            })
          )
            .then((results) => {
              // 检查所有结果是否都为 true，表示删除成功
              if (results.every((result) => result === true)) {
                // 如果所有删除成功，显示成功提示
                Message.success({
                  content: '删除成功',
                });
                roomIddx.value = [];
                // 然后重新获取数据
                fetchData();
              }
            })
            .catch((err) => {
              fetchData();
              roomIddx.value = [];
              console.error('失败:', err);
            });
        },
      });
    }
  };
  // import { values } from 'lodash';
  function determineRoomStatus(room_occupy, room_appointment) {
    if (room_occupy == 0 && room_appointment == 0) {
      return '空闲'; // 空闲
    } else if (room_occupy == 0 && room_appointment == 1) {
      return '已预约';
    } else if (room_occupy == 1) {
      return '在使用';
    } else {
      return '状态未知'; // 可根据实际情况返回适当的默认状态
    }
  }
  const handleDeleted = (index) => {
    forms.roomdata.splice(index, 1);
  };
  const handleDelete = (index) => {
    // 传入
    console.log('当前ienx', index, form.timedata);
    if (form.timedata[index].disabled == 1) {
      form.timedata[index].disabled = 9;
    } else {
      form.timedata[index].disabled = 1;
    }

    // form.timedata.splice(index, 1);
  };
  const isabledMinutes = ref([0]);
  // const disabledHours = ref('');

  // 获取禁用的小时数组
  function getDisabledHours(startTime, endTime) {
    console.log('获取到时间格式', startTime, endTime);

    const startHour = parseInt(startTime.split(':')[0]);
    const endHour = parseInt(endTime.split(':')[0]);
    const disabledHours = [];
    for (let h = 0; h < 24; h++) {
      if (h < startHour || h > endHour) {
        disabledHours.push(h);
      }
    }
    return disabledHours;
  }

  // 获取禁用的分钟数组
  function getDisabledMinutes(startTime, endTime, selectedHours) {
    console.log('获取到时间格式', startTime, endTime, selectedHours);
    const startDateTime = new Date(`2000-01-01T${startTime}`);
    const endDateTime = new Date(`2000-01-01T${endTime}`);
    const disabledMinutes = [];

    selectedHours.forEach((selectedHour) => {
      const selectedDateTime = new Date(`2000-01-01T${selectedHour}`);

      if (
        selectedDateTime >= startDateTime &&
        selectedDateTime <= endDateTime
      ) {
        // Case: selectedHour is within startTime and endTime
        // No minutes disabled
      } else {
        // Case: selectedHour is outside of startTime and endTime
        for (let m = 0; m < 60; m++) {
          disabledMinutes.push(m);
        }
      }
    });

    return disabledMinutes;
  }
  const adminUserData = ref([]);
  const dateshow = ref(false);
  const checkdate = () => {
    dateshow.value = true;
    appointmentTime({
      roomId: addForm.value.roomId,
    }).then((res) => {
      if (res.code == '200') {
        console.log('查询完成', res.data.scheduleTime);

        // Message.success({
        //   content: res.message,
        // });
        // JSON.parse(res.data.scheduleTime).forEach((item, index) => {

        // });
        form.timedata = JSON.parse(res.data.scheduleTime).map((item) => ({
          startTime: item.startTime,
          endTime: item.endTime,
          disabled: item.disabled,
          timers: [item.startTime, item.endTime],
          disabledHours: getDisabledHours(item.startTime, item.endTime),

          // startTimej: getDisabledHours(item.startTime, item.endTime),
          // endTimej: getDisabledMinutes(item.startTime, item.endTime),
        }));
        console.log('获取到全局时间配置更新', form.timedata);
      }
    });
  };
  const { loading, setLoading } = useLoading(true);
  const roomshow = ref(false);
  // 处理多选情况的数据
  let selectedAppointments = ref<string[]>([]); // 用来存放选中的多个选项
  // 查看房间详细数据
  // 全局变量，用于存储上传的图片信息
  const roomid = ref('');

  let roomPhoto = ref<string[]>([]);
  const roomdesfn = (item: any) => {
    roomshow.value = true;
    // console.log('房间元数据', item);
    addForm.value.roomId = item.roomId;
    addForm.value.roomNo = item.roomNo;
    addForm.value.roomName = item.roomName;
    addForm.value.roomPhoto = item.roomPhoto;
    roomPhoto.value = parseJSONs(item.roomPhoto);
    addForm.value.scheduleNumber = item.scheduleNumber;

    // addForm.value.scheduleNumber = item.scheduleNumber;
    // 处理数据返回数组形式 多选
    const convertedArray = item.openAppointment.split(',');
    selectedAppointments.value = convertedArray;
    addForm.value.openAppointment = selectedAppointments.value.join(',');
    userNameList().then((res) => {
      if (res.code == '200') {
        adminUserData.value = res.data;
      }
    });
    fetchDatas();
    dataOverviewdata();
    //
    appointmentTime({
      roomId: addForm.value.roomId,
    }).then((res) => {
      const scheduleTimeArray = JSON.parse(res.data.scheduleTime);

      // 遍历数组，并为每个对象添加 id 字段
      scheduleTimeArray.forEach((obj, index) => {
        obj.id = index + 1; // 从 1 开始递增
      });
      addForm.value.adminUser = res.data.adminUser.map((user) => user.userId);
      renderDatass.value = scheduleTimeArray;
    });

    console.log(
      '房间预览数据',
      // item.roomPhoto,
      // addForm.value.roomPhoto,
      // roomPhoto,
      addForm,
      roomPhoto.value
    );
  };
  function parseJSONs(str) {
    try {
      if (str === null || str === undefined) {
        return [];
      } else {
        return JSON.parse(str);
      }
    } catch (error) {
      // JSON.parse 出错时捕获异常
      // console.error('解析 JSON 出错:', error);
      if (str === null || str === undefined) {
        return [];
      } else {
        return str;
      }
    }
  }
  function parseJSON(str) {
    try {
      if (str === null || str === undefined) {
        throw new Error('传入的字符串为空或未定义');
      }
      return JSON.parse(str)[0];
    } catch (error) {
      // JSON.parse 出错时捕获异常
      // console.error('解析 JSON 出错:', error);
      if (str === null || str === undefined) {
        return '';
      } else {
        return str[0];
      }
    }
  }
  const startDate = ref('');
  const endDate = ref('');
  // // 当前日期
  const updateCurrentTimes = () => {
    endDate.value = dayjs().format('YYYY-MM-DD');
    startDate.value = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
  };
  // 初始化图表
  let myChart: echarts.ECharts | null = null;
  const chart = ref<HTMLElement | null>(null);
  let dynamicData = reactive([{ date: '0', pass: 0, noPass: 0 }]);
  const initChart = () => {
    if (chart.value) {
      myChart = echarts.init(chart.value);
      let sourceData = dynamicData.map((item) => [
        item.date,
        item.pass,
        item.noPass,
      ]);
      const option: echarts.EChartsOption = {
        legend: {
          left: '200', // 设置图例在左侧显示
        },
        tooltip: {},
        dataset: {
          source: [
            ['product', '通过', '未通过'],
            ...sourceData, // 使用动态的数据源
          ],
        },
        xAxis: { type: 'category' },
        yAxis: { type: 'value', name: '近7日数据' },
        series: [{ type: 'bar' }, { type: 'bar' }],
      };
      myChart.setOption(option);
    }
  };
  const dataOverviewdata = async () => {
    loading.value = true;
    try {
      const [AppointRes] = await Promise.all([
        dataAppointment({
          startDate: startDate.value,
          endDate: endDate.value,
          roomId: addForm.value.roomId,
        }),
      ]);

      if (AppointRes.data) {
        dynamicData = AppointRes.data;
        initChart(); // 数据加载完成后初始化图表
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      loading.value = false;
    }
  };
  // 在组件挂载后获取当前时间
  onMounted(() => {
    // dataOverviewdata();

    updateCurrentTimes();
  });

  // 监听 selectedAppointments 数组的变化
  // watch(selectedAppointments, (newVal) => {
  //   // 更新 addForm.openAppointment 为以逗号分隔的字符串
  //   addForm.value.openAppointment = newVal.join(',');
  //   // 验证字段 openAppointment
  //   if (!roomshow && selectedAppointments.value.length > 0) {
  //     addModel.value
  //       .validateField('openAppointment')
  //       .then(() => {
  //         console.log('验证通过');
  //       })
  //       .catch((errorInfo: any) => {
  //         console.log('验证失败', errorInfo);
  //       });
  //   }
  // });
  const rolesFieldsd = {
    value: 'userId',
    label: 'nickname',
  };
  // 保存
  const savefn = () => {
    //
    let result = '';
    if (addForm.value.adminUser) {
      result = addForm.value.adminUser.join(',');
    }
    saveRoom({
      roomId: addForm.value.roomId,
      roomNo: addForm.value.roomNo,
      roomName: addForm.value.roomName,
      roomPhoto: JSON.stringify(roomPhoto.value),
      scheduleNumber: addForm.value.scheduleNumber,
      openAppointment: selectedAppointments.value.join(','),
      adminUser: result,
    }).then((res) => {
      if (res.code == '200') {
        Message.success({
          //   content: res.message,
          content: '编辑成功',
        });
        // done(true);
        roomshow.value = false;
        fetchData();
      } else {
        // done(false);
      }
    });
  };
  // 返回
  const backfn = () => {
    roomshow.value = false;
    fetchData();
  };
  // 删除
  function delfn() {
    Modal.confirm({
      title: '提示',
      content: '确认删除吗？',
      onOk() {
        delRoom({
          roomId: addForm.value.roomId,
        }).then((res) => {
          if (res.code == '200') {
            Message.success({
              //   content: res.message,
              content: '删除成功',
            });
            // done(true);
            roomshow.value = false;
            fetchData();
          } else {
            // done(false);
          }
        });
      },
    });
  }
  // function csd(i) {
  //   console.log('当前有没有数据', i);
  //   forms.roomdata[i].openAppointment = selectedAppointments.value.join(',');
  // }
  function cs() {
    console.log('当前有没有数据', selectedAppointments);
    addForm.value.openAppointment = selectedAppointments.value.join(',');
    addModel.value
      .validateField('openAppointment')
      .then(() => {
        console.log('验证通过');
      })
      .catch((errorInfo: any) => {
        console.log('验证失败', errorInfo);
      });
  }
  // 定义函数来转换英文状态为中文
  // 处理 openAppointment 字段，将英文状态转换为中文
  const getAppointmentTypes = (openAppointment: string) => {
    const types = openAppointment.split(','); // 将字符串按逗号分割成数组
    return types.map((type: string) => getAppointmentType(type)).join(', '); // 调用 getAppointmentType 转换为中文后再连接成字符串
  };
  const getAppointmentType = (type: string): string => {
    switch (type) {
      case 'TEACHER':
        return '老师';
      case 'STUDENT':
        return '学生';
      case 'VISITOR':
        return '访客';
      default:
        return '';
    }
  };
  // 图片上传oss
  const { proxy } = getCurrentInstance();
  // 图片上传

  // 图片上传函数，接受 fileList 参数
  const onChange = (fileList: { file: File }[] | string) => {
    console.log('检测到上传图片', fileList);

    if (Array.isArray(fileList) && fileList.length > 0) {
      roomPhoto.value = [];
      const mainkey = window.config.VUE_APP_BASE_KEY;
      const uploadTasks = fileList.map((item) => {
        const key = `${mainkey}/room/images/${item.file.name}`;
        // return putProgress(key, item.file).then(
        //   (res: { data: { code: number; data: any } }) => {
        //     if (res && res.data && res.data.code === 200) {
        //       return proxy.baseurl + res.data.data;
        //     } else {
        //       return proxy.baseurl + key;
        //     }
        //   }
        // );
        let formData = new FormData();
        formData.append('file', item.file);
        return uploadFile(formData).then((res) => {
          if (res.code == 200) {
            console.log('上传成功', res);
            return res.data;
          }
        });
      });

      Promise.all(uploadTasks).then((urls) => {
        roomPhoto.value = [...roomPhoto.value, ...urls]; // 将上传成功的 URL 添加到 roomPhoto.value 中
        addForm.value.roomPhoto = JSON.stringify(roomPhoto.value); // 更新表单中的 roomPhoto 字段
        addModel.value.validateField('roomPhoto'); // 执行表单验证等操作
        console.log('成功返回的图片地址', roomPhoto.value);
      });
    }
  };
  const onChanges = (fileList: { file: File }[] | string) => {
    console.log('检测到上传图片', fileList);

    if (Array.isArray(fileList) && fileList.length > 0) {
      // console.log('清空之前的数据', fileList);
      roomPhoto.value = [];

      const mainkey = window.config.VUE_APP_BASE_KEY;
      const uploadTasks = fileList.map((item) => {
        const key = `${mainkey}/room/images/${item.file.name}`;
        //   return putProgress(key, item.file).then(
        //     (res: { data: { code: number; data: any } }) => {
        //       if (res && res.data && res.data.code === 200) {
        //         return proxy.baseurl + res.data.data;
        //       } else {
        //         return proxy.baseurl + key;
        //       }
        //     }
        //   );
        let formData = new FormData();
        formData.append('file', item.file);
        return uploadFile(formData).then((res) => {
          if (res.code == 200) {
            console.log('上传成功', res);
            return res.data;
          }
        });
      });

      Promise.all(uploadTasks).then((urls) => {
        console.log('原本的图片', addForm.value.roomPhoto);
        const yb = parseJSONs(addForm.value.roomPhoto);
        roomPhoto.value = [...yb, ...urls]; // 将上传成功的 URL 添加到 roomPhoto.value 中
        addForm.value.roomPhoto = JSON.stringify(roomPhoto.value); // 更新表单中的 roomPhoto 字段
        addModel.value.validateField('roomPhoto'); // 执行表单验证等操作
        console.log('成功返回的图片地址', roomPhoto.value);
        // 清空 fileList
        fileList.splice(0, fileList.length);
        console.log('上传完成后清空 fileList:', fileList);
      });
    }
  };

  const roomStatus = reactive([
    { id: 1, name: '在用' },
    { id: 2, name: '已预约' },
    { id: 3, name: '空闲' },
  ]);
  const generateDataModel = () => {
    return {
      roomNo: '',
      roomName: '',
      roomPhoto: '',
      scheduleNumber: '',
      openAppointment: '',
    };
  };
  const rules = reactive({
    roomNo: [
      {
        required: true,
        message: '请输入房间编号',
      },

      {
        maxLength: 20,
        message: '最长20位',
      },
    ],
    roomName: [
      {
        required: true,
        message: '请输入房间名称',
      },
      {
        maxLength: 20,
        message: '最长20位',
      },
      {
        match: /^(?=.*[\u4e00-\u9fa5a-zA-Z])[\da-zA-Z\u4e00-\u9fa5]+$/,
        message: '不能为纯数字',
      },
    ],
    scheduleNumber: [
      {
        required: true,
        message: '请输入人数限制',
      },
      {
        match: /^(?:[1-9]\d*|0)$/,
        message: '只能输入纯数字',
      },

      {
        maxLength: 10,
        message: '最长10位',
      },
    ],
    openAppointment: [
      {
        required: true,
        message: '请选择预约限制',
      },
    ],
    roomPhoto: [
      {
        required: true,
        message: '请上传房间图片',
      },
    ],
  });
  const handleCheck = (done: (arg0: boolean) => void) => {
    // console.log('表单数据', forms);
    //  forms.roomdata[i].openAppointment = selectedAppointments.value.join(',');
    if (plbs.value) {
      console.log('addModeld', addModeld.value, addModel.value);

      addModeld.value[0].validate(
        async (errors: undefined | Record<string, ValidatedError>) => {
          if (!errors) {
            Promise.all(
              forms.roomdata.map((item) => {
                return addRoom({
                  parentId: 0,
                  roomNo: item.roomNo,
                  roomName: item.roomName,
                  scheduleNumber: item.scheduleNumber,
                  openAppointment: item.openAppointment.join(','),
                }).then((res) => {
                  if (res.code == '200') {
                    return true; // 标记删除成功
                  } else {
                    fetchData();
                    throw new Error('启用失败');
                  }
                });
              })
            )
              .then((results) => {
                console.log('批量新增', results);
                // 检查所有结果是否都为 true，表示删除成功
                if (results.every((result) => result === true)) {
                  // 如果所有删除成功，显示成功提示
                  Message.success({
                    content: '新增成功',
                  });
                  addShow.value = false;
                  selectedAppointments.value = [];
                  // 然后重新获取数据
                  forms.roomdata = [
                    {
                      roomNo: '',
                      roomName: '',
                      scheduleNumber: '',
                      openAppointment: '',
                    },
                  ];
                  fetchData();
                }
              })
              .catch((err) => {
                fetchData();
                addShow.value = false;
                selectedAppointments.value = [];
                forms.roomdata = [
                  {
                    roomNo: '',
                    roomName: '',
                    scheduleNumber: '',
                    openAppointment: '',
                  },
                ];
                console.error('失败:', err);
              });
          }
        }
      );
    } else {
      if (loading.value) {
        done(false);
        return;
      }
      setLoading(true);
      setTimeout(() => {
        setLoading(false);
      }, 1500);
      addModel.value.validate(
        async (errors: undefined | Record<string, ValidatedError>) => {
          if (!errors) {
            if (addForm.value.id) {
              console.log('提交');
            } else {
              let result = '';
              if (addForm.value.adminUsers) {
                result = addForm.value.adminUser.join(',');
              }
              console.log('提交', addForm.value.adminUsers);
              addRoom({
                roomNo: addForm.value.roomNo,
                roomName: addForm.value.roomName,
                roomPhoto: addForm.value.roomPhoto,
                scheduleNumber: addForm.value.scheduleNumber,
                openAppointment: addForm.value.openAppointment,
                adminUser: result,
              }).then((res) => {
                if (res.code == '200') {
                  Message.success({
                    content: '新增成功',
                  });

                  done(true);
                  selectedAppointments.value = [];
                  fetchData();
                } else {
                  selectedAppointments.value = [];
                  done(false);
                }
              });
              // 走新增房间
            }
          } else {
            selectedAppointments.value = [];
            done(false);
          }
        }
      );
    }
  };

  const handleCancel = () => {
    addShow.value = false;
  };
  const addForm = ref(generateDataModel());
  const addShow = ref(false);
  const addModel = ref();
  const addModeld = ref();
  const openAdd = (parentId: any) => {
    addShow.value = true;
    plbs.value = false;
    addForm.value = {
      ...generateDataModel(),
      parentId: parentId,
    };
    userNameList().then((res) => {
      if (res.code == '200') {
        adminUserData.value = res.data;
      }
    });
  };
  const formModel = reactive({ roomName: '', roomStatus: '' });

  // 页面数据
  // 页面选择数
  const pagination = reactive({
    current: 1,
    pageSize: 8,
    total: 0,
  });
  const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
  };
  const paginations = reactive({
    current: 1,
    pageSize: 8,
    total: 0,
  });
  const onPageChanges = (current: number) => {
    paginations.current = current;
    fetchDatas();
  };
  const reset = () => {
    formModel.roomName = '';
    formModel.roomStatus = '';
    fetchData();
  };
  let roomlist = reactive([]);
  const fetchData = async () => {
    setLoading(true);
    try {
      const data = {
        pageNum: pagination.current,
        pageSize: pagination.pageSize,
        roomName: formModel.roomName,
        roomStatus: formModel.roomStatus,
      };
      // console.log('执行了搜索数据', formModel);

      const res = await roomList(data);
      pagination.total = res.data.total;
      pagination.current = res.data.current;
      roomlist = res.data.list || [];
      roomlist.forEach((item) => {
        // 解析 JSON 字符串
        item.roomPhoto = JSON.parse(item.roomPhoto);
      });
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
      // reset();
    }
  };

  // 页面加载时获取数据
  fetchData();

  // 自定义图片

  // 删除图片
  const deletes = (item, index) => {
    if (Array.isArray(roomPhoto)) {
      console.log('myArray 是一个数组');
    } else {
      console.log('myArray 不是一个数组');
    }
    console.log('当前图片类型', roomPhoto.value);

    roomPhoto.value.splice(index, 1);
    // imageUrl.value = imageUrl.value?.filter((el) => el !== item.imgname);
  };
  // 规则设置
  const form = reactive({
    timedata: [{ startTime: '', endTime: '', timers: ['', ''] }],
  });
  const handleAdd = () => {
    form.timedata.push({ startTime: '', endTime: '', timers: [] });
  };
  const handleAddd = () => {
    forms.roomdata.push({ roomNo: '', roomName: '', scheduleNumber: '' });
  };
  const selectfn = (value, index) => {
    console.log('选择的时间发生变化', value);
    // form.timedata[index].startTime = value[0];
    // form.timedata[index].endTime = value[1];
    isabledMinutes.value = getDisabledMinutes(
      form.timedata[index].startTime,
      form.timedata[index].endTime,
      value
    );
  };
  const changetimer = (value, index) => {
    // console.log('选择的时间发生变化', form.timedata[index].timers);
    form.timedata[index].startTime = value[0];
    form.timedata[index].endTime = value[1];
  };
  const saveA = () => {
    console.log('最新时间', form.timedata);
    //
    const newTimedata = form.timedata.map((item) => ({
      startTime: item.startTime,
      endTime: item.endTime,
      disabled: item.disabled,
    }));
    updateScheduleTime({
      roomId: addForm.value.roomId,
      scheduleTime: JSON.stringify(newTimedata),
    }).then((res) => {
      if (res.code == '200') {
        Message.success({
          //   content: res.message,
          content: '编辑成功',
        });
        appointmentTime({
          roomId: addForm.value.roomId,
        }).then((res) => {
          const scheduleTimeArray = JSON.parse(res.data.scheduleTime);

          // 遍历数组，并为每个对象添加 id 字段
          scheduleTimeArray.forEach((obj, index) => {
            obj.id = index + 1; // 从 1 开始递增
          });
          renderDatass.value = scheduleTimeArray;
        });
        // done(true);
        // reset();
      } else {
        // done(false);
      }
    });
  };
  const columnss = computed<TableColumnData[]>(() => [
    {
      title: '时间段序号',
      dataIndex: 'Timed',
      slotName: 'Timed',
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
    },
    {
      title: '状态',
      dataInndex: 'disabled',
      slotName: 'disabled',
    },
  ]);
  const columns = computed<TableColumnData[]>(() => [
    {
      title: '预约时段',
      dataIndex: 'startTime',
      slotName: 'startTime',
      align: 'center',
    },

    {
      title: '预约人(类型)',
      dataIndex: 'createUser',
      slotName: 'createUser',
    },
    {
      title: '使用人数',
      dataIndex: 'appointmentNumber',
    },
    {
      title: '主题',
      dataIndex: 'appointmentTheme',
    },
    {
      title: '审核状态',
      dataIndex: 'auditStatus',
      slotName: 'auditStatus',
    },
  ]);

  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: false,
    onlyCurrent: false,
  });
  const renderDatass = ref([]);

  const renderDatas = ref([]);
  // 请求表格数据
  const fetchDatas = async () => {
    setLoading(true);
    try {
      // if (tableid.value == '1') {
      //   formModel.value.auditStatus = '9';
      // } else {
      //   formModel.value.auditStatus = '1';
      // }
      console.log('form', formModel);

      const data = {
        pageNum: paginations.current,
        ...paginations,
        roomName: addForm.value.roomName,
        auditStatus: '1',
        nickname: nickname.value,
      };
      roomyuye(data).then((res) => {
        let list = res.data.list || [];

        renderDatas.value = list;
        paginations.total = res.data.total;
        paginations.current = res.data.current;
        nickname.value = '';
        // userList.value.selectAll(false);
      });
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };
  const onPageSizeChange = (pageSize: number) => {
    paginations.pageSize = pageSize;
    console.log('更改');

    fetchDatas();
  };
  const nickname = ref('');
  function formatDateTimeRange(startDateTimeStr, endDateTimeStr) {
    // 提取日期部分
    const startDate = new Date(startDateTimeStr);
    const endDate = new Date(endDateTimeStr);

    // 提取时间部分
    const startTime = startDate.toLocaleTimeString([], {
      hour: '2-digit',
      minute: '2-digit',
    });
    const endTime = endDate.toLocaleTimeString([], {
      hour: '2-digit',
      minute: '2-digit',
    });

    // 格式化成期望的格式
    const formattedDateTimeRange = `${
      startDate.toISOString().split('T')[0]
    } ${startTime}~${endTime}`;

    return formattedDateTimeRange;
  }
  const generateUploadModel = () => {
    return {
      file: null,
    };
  };

  const uploadForm = ref(generateUploadModel());
  const uploadShow = ref(false);
  const uploadModel = ref();
  const openUpload = () => {
    uploadForm.value = generateDataModel();
    uploadShow.value = true;
  };
  const uploadCancel = () => {
    uploadShow.value = false;
  };
  const uploadCheck = (done) => {
    if (loading.value) {
      done(false);
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1500);
    uploadModel.value.validate(
      async (errors: undefined | Record<string, ValidatedError>) => {
        if (!errors) {
          let formData = new FormData();

          formData.append('file', uploadForm.value.file);
          importUser(formData).then((res) => {
            if (res.code == '200') {
              Message.success({
                content: res.message,
              });

              uploadShow.value = false;
              reset();
              fetchData();
              done(true);
            } else {
              done(false);
            }
          });
        } else {
          done(false);
        }
      }
    );
  };
  const onChangesd = (fileList) => {
    if (fileList && fileList.length > 0) {
      uploadForm.value.file = fileList[0].file;
    } else {
      uploadForm.value.file = null;
    }
  };
  const uploadRules = {
    file: [
      {
        required: true,
        message: '请选择附件',
      },
    ],
  };
</script>

<style lang="less">
  .cdbfbox {
    height: 375px !important;
    overflow: hidden;
    overflow-y: auto;
  }
  .sycx {
    display: flex;
    flex-wrap: nowrap;
    margin-left: -40px;
    // align-content: center;
    // justify-content: center;
  }
  .sycxitem {
    // width: 00px;
    // background-color: red;
  }
  .scyapn {
    margin-left: -18px;
    width: 100px;
  }

  .sycx .arco-form-item-content-wrapper {
    width: 350px !important;
  }
  // .sgy .arco-col-5 {
  //   flex: 20% !important;
  //   width: 200px !important;
  // }
  .tcysb .arco-form-item-label {
    // width: 200px !important;
  }
  .grid-demos {
    margin-bottom: 20px;
  }
  .jzbox {
    display: flex;
    align-content: center;
    justify-content: center;
  }
  .roombt {
    // position: absolute;
    // right: -30px;
  }
  .roomitem {
    width: 370px;
    height: 378px;
    // height: 305px;
    // width: 290px;
    border: 1px solid #e9e9e9;
    // flex-wrap: 2%;
    margin: 10px 10px;
    display: flex;
    flex-direction: column;
  }
  .roombox {
    display: flex;
    flex-wrap: wrap;
    // padding: 0 15px;
  }
  .roomactive {
    position: absolute;
    display: flex;
  }
  .roomzt {
    width: 70px;
    // width: 145px;
    padding: 5px;
    color: #fff;
    background-color: #0ebca8;
    position: absolute;
    left: 8px;
    top: 8px;
    border-radius: 2px 2px 2px 2px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
  .roomzts {
    width: 50px;
    padding: 5px;
    color: #fff;
    position: absolute;
    left: 8px;
    top: 8px;
    border-radius: 2px 2px 2px 2px;
    display: flex;
    align-content: center;
    justify-content: center;
    background-color: #eda050;
  }
  .roomztss {
    padding: 5px;
    color: #fff;
    width: 70px;
    position: absolute;
    left: 8px;
    top: 8px;
    border-radius: 2px 2px 2px 2px;
    display: flex;
    align-content: center;
    justify-content: center;
    background-color: #3c75f1;
  }
  .roomxq {
    color: rgb(2, 174, 242);
    display: flex;
  }
  .roomimg {
    width: 370px;
    height: 253px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    // background-color: red;
  }
  .roomimg img {
    width: 364px;
    height: 252px;
  }
  .roomdesbox {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;
    position: relative;
  }
  .roomdesbox span {
    display: block;
    margin: 10px 0;
  }
  .roomname {
    font-size: 20px;
    color: black;
  }
  .roomnuber {
    font-size: 14px;
    color: #929292;
  }
  .roomacit {
    font-size: 14px;
    color: #929292;
  }
  .roomxq {
    cursor: pointer;
    display: flex;
    align-content: center;
    position: relative;
  }
  .roomxqspan {
    position: absolute;
    right: -5px;
  }
  // 下面自定义组件
  .wrap {
    width: 100%;
  }
  #demo {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    position: relative;
    border: 2px dashed #dcdcdc;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 5px 20px 5px;
  }

  #demo_file {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  #demo_img {
    display: block;
    width: 50%;
    height: 50%;
  }

  #look {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
  }

  #look_img {
    width: 80px;
    height: 80px;
    margin: 8px 5px 20px 5px;
  }
  .item_img {
    border: 2px dashed #dcdcdc;
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    position: relative;
    img {
      display: block;
      cursor: pointer;
      width: 100%;
      height: 100%;
      padding: 5px;
      box-sizing: border-box;
    }
  }
  .item_time {
    height: 10px;
  }

  .look_event {
    width: 100%;
    height: 0;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    transition: 1s;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      display: block;
      width: 200px;
      height: 0;
      cursor: pointer;
    }
  }

  .item_img:hover .look_event {
    height: 100%;
    opacity: 70%;
  }

  .item_img:hover .look_event > img {
    height: 4em;
  }
  .preview_img {
    width: 450px;
    height: 450px;
  }
  .updiv {
    margin-top: -13px;
  }
  .mentsbox {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mentsbox button {
    margin: 0 10px;
  }
  .contentgl {
  }
  .contentgl span {
    display: block;
    width: 200px !important;
    overflow: hidden;
  }
  .checkdate {
    color: blue;
    cursor: pointer;
  }

  .rulesbt {
    display: flex;
    padding-left: 0px;
    margin-bottom: 20px;
  }
  .rulesitemone {
    /* background-color: rgb(0, 209, 181); */
    width: 85px;
  }
  .rulesitemtwo {
    width: 190px;
    text-align: center;
  }
  .rulesitemtwos {
    width: 190px;
    text-align: center;
  }
  .rulesitemtwoss {
    width: 190px;
    text-align: center;
    margin-left: 20px;
  }
  .rulesitemthree {
    width: 55px;
    text-align: center;
    margin-left: 13px;
  }
  .addbox {
    text-align: center;
  }
  .bz .arco-modal-body {
    display: flex;
    text-align: center;
    align-content: center;
    justify-content: center;
  }
  // .bz .arco-modal-body {
  //   overflow: hidden !important;
  // }
  // .bz .arco-modal-body {
  //   overflow-x: auto;
  // }
  .chart-container {
    width: 100%;
    height: 300px;
  }
  .cd {
    height: 345px;
  }
  .roomdelpl {
    // margin-right: 200px;
    position: absolute;
    right: 0px;
    bottom: -10px;
  }
  .startds .arco-modal-header .arco-modal-title-align-center {
    text-align: left;
    justify-content: flex-start;
  }
  .pltj {
    color: #0084ff;
    cursor: pointer;
  }
  .csdf .arco-modal {
    width: auto !important;
  }
  .rmcs .arco-form-item-content-wrapper {
    width: 270px !important;
  }
  .rmcsd {
    display: flex;
    flex-direction: row !important;
  }
  .rmpldov {
    width: 365px;
  }
  .rmpldovs {
    margin-left: -70px;
  }
  .addboxdd {
    position: absolute;
    left: 50%;
  }
  .rommzw {
    width: 50px;
    height: 20px;
  }
</style>
